<template>
  <div :class="$style.container">
    <div :class="$style.header">
      <div :class="$style.tip">离考试截止时间还有</div>
      <div :class="$style.time">{{ countDown }}</div>
    </div>
    <div :class="$style.content">
      <div :class="$style.name">{{ list.title }}</div>
      <div :class="$style.horizontal"></div>
      <div :class="$style.text">
        考试时长：<span :class="$style.textColor">{{ list.duration }}分钟</span>
      </div>
      <div :class="$style.text">
        满分：<span :class="$style.textColor">{{ list.totalScore }}分</span>
      </div>
      <div :class="$style.text">
        考试时间：
        <span :class="$style.textColor"> {{ timeJoin(list.startTime, list.endTime) }}</span>
      </div>
      <div :class="$style.text">
        提交条件：<span :class="$style.textColor">{{
          list.requirement ? list.requirement : '完成试题100%'
        }}</span>
      </div>
    </div>
    <div :class="$style.tipContent">温馨提醒：</div>
    <div :class="$style.tipContent">
      考试一旦开始，中途不得切换屏幕或者退出程序，如果因其他客观原因退出的情况，请联系管理处理。
    </div>
    <div :class="$style.btnContainer">
      <van-button
        type="default"
        size="large"
        :class="$style.btn"
        :disabled="disableBtn"
        @click="startExam"
      >
        <!-- {{ list.status === 0 && countDown !== '00时00分00秒' ? '开始考试' : '' }}
        {{
          list.status === 1 && list.remainDuration !== 0 && countDown !== '00时00分00秒'
            ? '继续考试'
            : ''
        }}
        {{
          (list.status === 1 && list.remainDuration === 0) || countDown === '00时00分00秒'
            ? '提交试卷'
            : ''
        }}
        {{ list.status === 2 || list.status === 3 ? '考试已完成' : '' }}
        {{ list.status === 4 ? '考试未参考' : '' }} -->
        开始考试
      </van-button>
    </div>

    <div v-if="loading" :class="$style.loading">
      <van-loading color="#3EAD68" size="24px" vertical>试卷加载中...</van-loading>
    </div>
  </div>
</template>
<script>
import Store from '@/store';
import { Button, Dialog, Loading } from 'vant';
import { dataTransform, timestampToTime } from '@/helpers/data-transform';
import { GetPaper } from '@/apis';

export default {
  name: 'exam',
  components: {
    'van-button': Button,
    'van-loading': Loading,
  },
  Store,
  data() {
    return {
      list: {},
      /**倒计时 */
      countDown: '',
      /**倒计时SetTimeOut */
      countDownSetTimeOut: '',
      disableBtn: false,
      loading: false,
    };
  },
  computed: {
    timeConvert() {
      return (time) => dataTransform(parseInt(time), 1);
    },
    /** 秒转分钟 */
    secToMin() {
      return (sec) => (sec ? Math.floor(parseInt(sec) / 60) : '-');
    },
    /** 开始时间+结束时间 */
    timeJoin() {
      return (start, end) =>
        `${start ? start.split(' ')[0].replace(/-/g, '/') : ''} - ${
          end ? end.split(' ')[0].replace(/-/g, '/') : ''
        } `;
    },
  },
  mounted() {
    const { id } = this.$router.history.current.query;
    GetPaper(id).then((res) => {
      const remainDurationTime = this._getRemainDuration(res.data.endTime);
      this.list = { ...res.data, remainDuration: remainDurationTime, id: id };
      this.dataConvert();
    });
  },
  methods: {
    /**进入考试 */
    joinExam() {
      this.$router.push(`examing?id=${this.list.id}`);
    },
    /**开始考试 */
    startExam() {
      const { endTime, remainDuration, duration } = this.list;
      const time = this.stopTime(endTime, remainDuration, duration);
      if (this.countDown !== '00时00分00秒') {
        Dialog.confirm({
          title: '提示',
          message: `开考后，考试截止时间为当前时间+考试时长，请在时间范围内完成考试，本次考试截止时间为：${time}`,
        }).then(() => {
          this.joinExam();
        });
      } else {
        this.joinExam();
      }
    },
    /**未参加考试 */
    noAttend() {
      const isCacheQuestion = !!window.localStorage.getItem(`paper${this.list.id}`);
      if (!isCacheQuestion) {
        this.disableBtn = true;
      }
    },
    /** 结束时间计算 */
    stopTime(endTime, remainDuration, duration) {
      const time =
        (parseInt(new Date(`${endTime.replace(/-/g, '/')}`).getTime() / 1000) -
          parseInt(remainDuration) +
          parseInt(duration) * 60) *
        1000;
      return timestampToTime(time);
    },
    /** 倒计时 */
    dataConvert() {
      this.countDown = dataTransform(this.list.remainDuration, 1);
      this.countDownSetTimeOut = setTimeout(() => {
        if (this.list.remainDuration > 0) this.list.remainDuration--;
        this.countDown = dataTransform(this.list.remainDuration, 1);
        if (this.list.remainDuration === 0) {
          this.noAttend();
        } else {
          this.dataConvert();
        }
      }, 1000);
    },
    _getRemainDuration(endDate) {
      return (new Date(endDate.replace(/-/g, '/')).getTime() - new Date().getTime()) / 1000;
    },
  },
};
</script>
<style lang="less" module>
.container {
  height: 100vh;
  background: url('../../assets/exam.png') no-repeat top center;
  background-size: cover;
  padding-top: 10px;
}
.header {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin: 0px 15px 10px 15px;
  height: 100px;
  padding: 21px 0px 0px 0px;
  text-align: center;
}
.tip {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.time {
  padding: 6px 0px 0px 0px;
  font-size: 32px;
  color: #ffffff;
}
.content {
  // height: 214px;
  margin: 0 15px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}
.name {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  color: #ffffff;
  padding: 15px 0 0 15px;
}
.horizontal {
  background: rgba(255, 255, 255, 0.2);
  height: 1px;
  margin: 13px 15px 10px;
}
.text {
  padding-left: 15px;
  padding-bottom: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.textColor {
  color: white;
}

.tipContent {
  padding: 10px 15px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.btnContainer {
  position: absolute;
  width: 345px;
  height: 44px;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}
.btn {
  width: 345px;
  height: 44px;
  border-radius: 50px;
  color: #025036;
}
.btn2 {
  color: white;
  background: #bbbbbb;
}
.loading {
  padding-top: 50%;
  top: 0;
  position: absolute;
  height: 100vh;
  width: 100%;
  background: white;
  z-index: 99;
}
</style>
